<template>
  <div class="setting-container">
    <!-- 页面标题和保存按钮 -->
    <div class="page-header">
      <h1>系统高级设置</h1>
      <el-button type="primary" @click="saveSettings" :loading="saving">保存设置</el-button>
    </div>
    
    <!-- 模块卡片容器 -->
    <div class="cards-container">
      <!-- BOM模块设置卡片 -->
      <el-card shadow="hover" class="module-card">
        <template #header>
          <div class="module-card-header">
            <span class="header-icon">📋</span>
            <span>BOM模块设置</span>
          </div>
        </template>
        
        <el-form label-position="top" class="setting-form">
          <el-form-item label="唯一性设置">
            <el-radio-group v-model="settings.bom.uniqueType" @change="settingChanged($event)" class="radio-group">
              <el-radio :label="0" class="radio-option">相对唯一</el-radio>
              <el-radio :label="1" class="radio-option">绝对唯一</el-radio>
            </el-radio-group>
            
            <div class="setting-description" v-if="settings.bom.uniqueType === 0">
              <span class="info-icon">ℹ️</span>
              相对唯一：每个导入批次下的零件物料编码必须唯一，防止在同一导入批次中出现重复的编码。
            </div>
            <div class="setting-description" v-else>
              <span class="info-icon">ℹ️</span>
              绝对唯一：所有物料编码在整个系统中必须唯一，确保物料编码的全局唯一性。
            </div>
          </el-form-item>

          <el-form-item label="编码问号处理方式">
            <el-radio-group v-model="settings.bom.questionMarkHandle" @change="(value) => settingChanged(value, 'questionMarkHandle')" class="radio-group">
              <el-radio :label="0" class="radio-option">保留问号</el-radio>
              <el-radio :label="1" class="radio-option">替换问号为随机数</el-radio>
              <el-radio :label="2" class="radio-option">替换问号为零</el-radio>
            </el-radio-group>
            
            <div class="setting-description" v-if="settings.bom.questionMarkHandle === 0">
              <span class="info-icon">ℹ️</span>
              保留问号：在生成的物料编码中保留原始的问号占位符。
            </div>
            <div class="setting-description" v-else-if="settings.bom.questionMarkHandle === 1">
              <span class="info-icon">ℹ️</span>
              替换问号为随机数：将编码中的每个问号替换为0-9之间的随机数字。
            </div>
            <div class="setting-description" v-else>
              <span class="info-icon">ℹ️</span>
              替换问号为零：将编码中的所有问号统一替换为数字零(0)。
            </div>
          </el-form-item>

          <el-form-item label="编码匹配模式">
            <el-radio-group v-model="settings.bom.matchMode" @change="(value) => settingChanged(value, 'matchMode')" class="radio-group">
              <el-radio :label="0" class="radio-option">精准匹配</el-radio>
              <el-radio :label="1" class="radio-option">模糊匹配</el-radio>
            </el-radio-group>
            
            <div class="setting-description" v-if="settings.bom.matchMode === 0">
              <span class="info-icon">ℹ️</span>
              精准匹配：只有当物料名称与字典中的标准件名称完全相同时才会进行匹配。
            </div>
            <div class="setting-description" v-else>
              <span class="info-icon">ℹ️</span>
              模糊匹配：当物料名称包含字典中的标准件名称时就会进行匹配，提高匹配成功率。
            </div>
          </el-form-item>

          <!-- 修改提示 -->
          <el-divider v-if="hasChanges" />
          <div v-if="hasChanges" class="warning-message">
            <el-alert
              title="设置已修改，请点击保存按钮使设置生效"
              type="warning"
              show-icon
              :closable="false"
            />
          </div>
        </el-form>
      </el-card>

      <!-- 系统通用设置卡片 -->
      <el-card shadow="hover" class="module-card">
        <template #header>
          <div class="module-card-header">
            <span class="header-icon">⚙️</span>
            <span>系统通用设置</span>
          </div>
        </template>
        
        <div class="empty-message">
          <el-empty description="系统通用设置功能正在开发中..." />
        </div>
      </el-card>

      <!-- 数据安全设置卡片 -->
      <el-card shadow="hover" class="module-card">
        <template #header>
          <div class="module-card-header">
            <span class="header-icon">🔒</span>
            <span>数据安全设置</span>
          </div>
        </template>
        
        <div class="empty-message">
          <el-empty description="数据安全设置功能正在开发中..." />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Setting',
  data() {
    return {
      saving: false,
      hasChanges: false,
      originalSettings: {},
      settings: {
        bom: {
          uniqueType: 1, // 默认选择绝对唯一 (1)
          questionMarkHandle: 1, // 默认替换问号为随机数 (1)
          matchMode: 1 // 默认模糊匹配 (1)
        }
      },
      pendingChanges: [] // 存储待保存的更改
    }
  },
  mounted() {
    this.loadSettings()
  },
  methods: {
    // 加载设置
    loadSettings() {
      // 检查request是否可用
      if (!this.$request) {
        console.warn('Request未配置，无法加载设置')
        if (this.$message) this.$message.error('系统配置不完整，无法加载设置')
        return
      }
      
      this.$request
        .get('/api/setting/module/bom/map')
        .then((res) => {
          if (res.code === '200') {
        // 检查是否有数据
        if (res.data && typeof res.data === 'object') {
          // 设置唯一性类型
          this.settings.bom.uniqueType = res.data['bom.unique_type'] !== undefined ? Number(res.data['bom.unique_type']) : 1;
          // 设置问号处理方式
          this.settings.bom.questionMarkHandle = res.data['bom.question_mark_handle'] !== undefined ? Number(res.data['bom.question_mark_handle']) : 1;
          // 设置匹配模式
          this.settings.bom.matchMode = res.data['bom.match_mode'] !== undefined ? Number(res.data['bom.match_mode']) : 1;
          this.originalSettings = JSON.parse(JSON.stringify(this.settings))
        } else {
              // 没有查询到设置数据，显示错误提示
              console.warn('未查询到BOM设置数据')
              if (this.$message) this.$message.warning('未查询到BOM设置数据，请初始化设置')
              // 设置临时值但标记为有变化，这样用户必须保存设置
          this.settings.bom.uniqueType = 1
          this.settings.bom.questionMarkHandle = 1
          this.settings.bom.matchMode = 1
          this.hasChanges = true
        }
          } else {
            console.warn('加载设置失败:', res.msg || '接口错误')
            if (this.$message) this.$message.error('加载设置失败：' + (res.msg || '接口错误'))
          }
        })
        .catch((error) => {
          console.error('加载设置异常:', error)
          if (this.$message) this.$message.error('加载设置时发生异常，请检查网络连接')
        })
    },

    // 设置变更处理 - 适配单选按钮组
    settingChanged(value, settingType = 'uniqueType') {
      this.hasChanges = true
      this.pendingChanges = []
      
      // 添加唯一性设置
      this.pendingChanges.push({
        k: 'bom.unique_type',
        v: String(this.settings.bom.uniqueType), // 0表示相对唯一，1表示绝对唯一
        module: 'bom',
        type: 'number',
        description: 'BOM唯一性类型设置'
      });
      
      // 添加问号处理方式设置
      this.pendingChanges.push({
        k: 'bom.question_mark_handle',
        v: String(this.settings.bom.questionMarkHandle), // 0:保留问号, 1:替换问号为随机数, 2:替换问号为零
        module: 'bom',
        type: 'number',
        description: 'BOM编码问号处理方式'
      });
      
      // 添加匹配模式设置
      this.pendingChanges.push({
        k: 'bom.match_mode',
        v: String(this.settings.bom.matchMode), // 0:精准匹配, 1:模糊匹配
        module: 'bom',
        type: 'number',
        description: 'BOM编码匹配模式'
      });
    },

    // 保存设置
    saveSettings() {
      if (!this.hasChanges || this.pendingChanges.length === 0) {
        if (this.$message) this.$message.info('没有需要保存的更改')
        return
      }

      this.saving = true
      
      // 检查request是否可用
      if (!this.$request) {
        console.warn('Request未配置，无法保存设置')
        if (this.$message) this.$message.warning('系统配置不完整，无法保存设置')
        this.saving = false
        return
      }
      
      this.$request
        .post('/api/setting/batch/save', this.pendingChanges)
        .then((res) => {
          if (res.code === '200') {
            if (this.$message) this.$message.success(res.msg || '设置保存成功')
            this.hasChanges = false
            this.pendingChanges = []
            this.originalSettings = JSON.parse(JSON.stringify(this.settings))
          } else {
            if (this.$message) this.$message.error(res.msg || '保存失败')
          }
        })
        .catch((error) => {
          console.error('保存设置异常:', error)
          if (this.$message) this.$message.error('保存设置失败，请检查网络连接或重试')
        })
        .finally(() => {
          this.saving = false
        })
    },

    // 初始化BOM设置
    initBomSettings() {
      // 检查确认对话框是否可用
      if (!this.$confirm) {
        console.warn('确认对话框功能未配置')
        if (this.$message) this.$message.warning('系统功能不完整')
        return
      }
      
      this.$confirm('确定要初始化BOM模块设置吗？这将重置所有BOM相关设置到默认值。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 检查request是否可用
        if (!this.$request) {
          console.warn('Request未配置，无法初始化设置')
          if (this.$message) this.$message.warning('系统配置不完整，无法初始化设置')
          return
        }
        
        this.$request
          .post('/api/setting/init/bom')
          .then((res) => {
            if (res.code === '200') {
              if (this.$message) this.$message.success(res.msg || 'BOM设置初始化成功')
              this.loadSettings() // 重新加载设置
            } else {
              if (this.$message) this.$message.error(res.msg || '初始化失败')
            }
          })
          .catch((error) => {
            console.error('初始化BOM设置异常:', error)
            if (this.$message) this.$message.error('初始化失败，请重试')
          })
      }).catch(() => {
        // 用户取消
      })
    }
  }
}
</script>

<style scoped>
.setting-container {
  padding: 20px;
  min-height: calc(100vh - 60px);
  background-color: #f5f7fa;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

/* 页面标题区域 */
.page-header {
  max-width: 1200px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h1 {
  font-size: 24px;
  color: #303133;
  margin: 0;
  font-weight: 500;
}

/* 卡片容器 */
.cards-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  gap: 20px;
}

/* 模块卡片样式 */
.module-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.module-card:hover {
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
}

/* 卡片头部 */
.module-card-header {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #303133;
  font-size: 16px;
}

.header-icon {
  margin-right: 8px;
  font-size: 18px;
  display: inline-block;
}

.info-icon {
  margin-right: 8px;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 设置表单样式 */
.setting-form {
  padding: 10px 0;
}

/* 单选按钮组样式 */
.radio-group {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.radio-option {
  padding: 5px 0;
}

/* 设置描述文本 */
.setting-description {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #f4f7fa;
  border-left: 3px solid #409eff;
  border-radius: 4px;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
}



/* 警告信息 */
.warning-message {
  margin-top: 16px;
}

/* 空状态样式 */
.empty-message {
  padding: 40px 0;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cards-container {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .radio-group {
    flex-direction: column;
    gap: 10px;
  }
}
</style>